import { Tabs } from 'antd';
import { CSSProperties, memo } from 'react';
interface Menu {
  key: number;
  title: string;
}

interface TabMenusProps {
  menus?: Menu[];
  selectedIndex?: number;
  onChange: (index: number) => void;
  className?: string;
}

const selectStyle: CSSProperties = {
  borderBottom: '2px solid #6640FF',
  color: '#6640FF',
};

const TabMenus = ({ menus, selectedIndex, onChange, className }: TabMenusProps) => {
  return (
    <div className={`flex  text-center ${className}`}>
      {menus?.map((menu, index) => {
        return (
          <div
            key={menu.key}
            onClick={() => onChange(menu.key)}
            className={`mr-10 flex cursor-pointer items-center text-nowrap pb-1 ${
              selectedIndex == index
                ? 'border-b-2 border-solid border-b-@brand-color text-@brand-color'
                : ' border-b-2 border-[white]'
            }`}

            // style={selectedIndex == index ? selectStyle : {}}
          >
            {menu.title}
          </div>
        );
      })}
      <div className="w-full"></div>
    </div>
  );
};
export default memo(TabMenus);
